/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../../styles' as styles;
@use '../../styles/tokens' as awsui;

// Outer borders of adjacent cells overlap and we want selected option border
// to take precedence over the other ones, hence negative margins and z-indices
.selectable-item {
  @include styles.default-text-style;
  position: relative;
  list-style: none;
  z-index: 1;

  border-block: awsui.$border-divider-list-width solid transparent;
  border-inline: awsui.$border-divider-list-width solid transparent;
  border-block-start-color: awsui.$color-border-dropdown-item-default;
  border-block-end-color: awsui.$color-border-dropdown-item-default;
  background-color: awsui.$color-background-dropdown-item-default;
  color: awsui.$color-text-dropdown-item-default;

  // remove the borders completely to avoid the slating effect at the border ends (AWSUI-10545)
  border-inline-start-width: 0;
  border-inline-end-width: 0;
  // to compensate for the loss of padding due to the removal of the left and right borders
  // and differences in default divider + selected border widths (visual refresh)
  padding-block: calc(#{awsui.$border-item-width} - #{awsui.$border-divider-list-width});
  padding-inline: awsui.$border-item-width;

  // For custom styles and background on the selectable-item-content, the content should not clip through the selectable-item borders..
  overflow: hidden;

  > .selectable-item-content {
    padding-block: styles.$option-padding-vertical;
    padding-inline: styles.$control-padding-horizontal;
  }

  &.pad-bottom {
    padding-block-end: calc(#{awsui.$border-item-width} - #{awsui.$border-divider-list-width});
    border-block-end-color: transparent;
    > .selectable-item-content {
      padding-block-end: calc(#{styles.$option-padding-vertical} + #{awsui.$space-xxxs});
    }
  }

  &:not(:first-child),
  &.virtual {
    margin-block-start: calc(-1 * #{awsui.$border-item-width});
  }

  &.has-background {
    background-color: awsui.$color-background-dropdown-item-hover;
  }
  &.child {
    padding-inline-start: awsui.$border-item-width;
    > .selectable-item-content {
      padding-inline-start: awsui.$space-xxl;
    }
  }

  &.disabled > .selectable-item-content {
    color: awsui.$color-text-dropdown-item-disabled;
  }

  &.highlighted,
  &.selected {
    color: awsui.$color-text-dropdown-item-highlighted;
    border-width: awsui.$border-item-width;
    border-start-start-radius: awsui.$border-radius-item;
    border-start-end-radius: awsui.$border-radius-item;
    border-end-start-radius: awsui.$border-radius-item;
    border-end-end-radius: awsui.$border-radius-item;
    padding-block: 0;
    padding-inline: 0;

    > .selectable-item-content {
      padding-block: styles.$option-padding-vertical;
      padding-inline: styles.$control-padding-horizontal;
    }
    &.child {
      padding-inline-start: 0;
      > .selectable-item-content {
        padding-inline-start: awsui.$space-xxl;
      }
    }
    &.pad-bottom {
      padding-block-end: 0;
      > .selectable-item-content {
        padding-block-end: (calc(#{styles.$option-padding-vertical} + #{awsui.$space-xxxs}));
      }
    }
  }
  &.highlighted {
    z-index: 3;
    background-color: awsui.$color-background-dropdown-item-hover;
    border-color: awsui.$color-border-dropdown-item-hover;
    &.disabled {
      border-color: awsui.$color-border-dropdown-item-dimmed-hover;
      background-color: awsui.$color-background-dropdown-item-dimmed;
      > .selectable-item-content {
        color: awsui.$color-text-dropdown-item-dimmed;
      }
    }
    &.is-keyboard {
      border-color: awsui.$color-border-dropdown-item-focused;
      &:not(.visual-refresh) {
        box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
      }
    }
  }

  &.selected {
    z-index: 2;
    background-color: awsui.$color-background-dropdown-item-selected;
    border-color: awsui.$color-border-dropdown-item-selected;
    // smooth adjacent selected borders to avoid bubble effect (visual refresh)
    &.next-item-selected {
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }
    &.highlighted {
      border-color: awsui.$color-border-dropdown-item-selected;
      z-index: 3;
      outline: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
      outline-offset: calc(-2 * #{awsui.$border-item-width});
      &.is-keyboard {
        border-color: awsui.$color-border-dropdown-item-selected;
        outline-color: awsui.$color-border-dropdown-item-focused;
      }

      &:not(.visual-refresh) {
        border-color: awsui.$color-border-dropdown-item-hover;
        outline: none;
        &.is-keyboard {
          border-color: awsui.$color-border-dropdown-item-focused;
        }
      }
    }
  }

  &.selected + &.selected,
  &.selected.previous-item-selected {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }

  &.parent {
    &:not(.disabled) {
      > .selectable-item-content {
        color: awsui.$color-text-dropdown-group-label;
      }
    }
    &:not(.interactiveGroups) {
      border-block-start-color: awsui.$color-border-dropdown-group;
      padding-block: 0;
      padding-inline: 0;
      &:not(:has(> .selectable-item-content)) {
        padding-block: calc(#{awsui.$border-item-width} - #{awsui.$border-divider-list-width});
        padding-inline: awsui.$border-item-width;
      }

      > .selectable-item-content {
        padding-block: awsui.$space-xs;
        padding-inline: awsui.$space-xs;
        font-weight: bold;
      }
    }
    &.interactiveGroups {
      > .selectable-item-content {
        padding-block: styles.$group-option-padding-vertical;
        padding-inline: styles.$control-padding-horizontal;
        font-weight: bold;
      }
      &.highlighted > .selectable-item-content {
        color: awsui.$color-text-dropdown-item-highlighted;
      }
      &.highlighted,
      &.selected {
        padding-block: 0;
        padding-inline: 0;
        > .selectable-item-content {
          padding-block: styles.$group-option-padding-vertical;
          padding-inline: styles.$control-padding-horizontal;
        }
      }
    }
  }

  &.sticky {
    position: sticky;
    inset-block-start: 0;

    // Push the next option down to prevent its border in highlighted or selected state from being partially covered by the sticky option
    margin-block-end: calc(#{awsui.$border-item-width} - #{awsui.$border-divider-list-width});

    // Stay on top of the other options when they are scrolled up
    z-index: 4;

    &:not(.highlighted):not(.selected) {
      // Prevent covering the list border despite the higher z-index
      border-inline-start-width: awsui.$border-item-width;
      border-inline-start-color: awsui.$color-border-dropdown-container;
      border-inline-end-color: awsui.$color-border-dropdown-container;
      padding-inline: 0;
      > .selectable-item-content {
        padding-inline: styles.$control-padding-horizontal;
      }

      &:not(.with-scrollbar) {
        border-inline-end-width: awsui.$border-item-width;
      }

      &.with-scrollbar {
        border-inline-end-width: 0;
      }

      // Only display top border when not being rendered after the filter
      &:not(.after-header) {
        border-start-start-radius: awsui.$border-radius-item;
        &:not(&.with-scrollbar) {
          border-start-end-radius: awsui.$border-radius-item;
        }
      }
      &.after-header {
        border-block-start-color: awsui.$color-background-dropdown-item-default;
      }
    }

    &.disabled.highlighted,
    &.disabled.selected {
      border-block-end-color: transparent;
      border-block-start-color: transparent;
      border-inline-start-color: transparent;
      border-inline-end-color: transparent;
    }
  }

  &:not(.disabled):not(.parent) {
    cursor: pointer;
  }
  &.interactiveGroups:not(.disabled) {
    cursor: pointer;
  }
  &.virtual {
    position: absolute;
    inset-block-start: awsui.$border-dropdown-virtual-offset-width;
    inset-inline-start: 0;
    inline-size: 100%;
    box-sizing: border-box;
    &:first-of-type:not(.selected, .highlighted) {
      border-block-start-color: awsui.$color-border-dropdown-item-top;
    }
  }
}

.measure-strut {
  position: absolute;
  pointer-events: none;
  block-size: 100%;
  inline-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  padding-block-start: awsui.$border-divider-list-width;
  &-first {
    padding-block-end: awsui.$border-divider-list-width;
  }
}

.screenreader-content {
  @include styles.awsui-util-hide;
}

.option-content {
  /* used in test-utils */
}

.select-all {
  /* used in test-utils */
}
